import React from 'react'
import { Box, NoData } from '$components';
import ReactEcharts from 'echarts-for-react';
import moment from 'moment';

function Infrastructure(props) {
    const { fireTrend } = props;
    let Ydata = fireTrend.map(t => t.count);
    let Xdata = fireTrend.map(t => moment(t.time).format('MM月DD日'));

    const option = {
        tooltip: {
            trigger: "axis",
            axisPointer: {
                type: "shadow",
            },
            backgroundColor: "rgba(255,255,255,0.75)",
            extraCssText: "box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.3);",
            textStyle: {
                fontSize: 14,
                color: "#000",
            },
            formatter: (params) => {
                const item = params[0];
                return item.name + " : " + item.value + " 次";
            },
        },
        xAxis: [
            {
                type: "category",
                boundaryGap: false,
                axisLabel: {
                    interval: 0,
                    color: "rgba(195, 230, 255, 1)",
                    fontSize: 10,
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        type: 'solid',
                        color: "rgba(184, 185, 188, 0.5)",
                        width: 1,
                    },
                },
                data: Xdata,
            },
        ],
        yAxis: [
            {
                splitNumber: 5, // 刻度段数
                type: "value",
                nameTextStyle: {
                    color: "rgba(195, 230, 255, 1)",
                    fontWeight: 400,
                    fontSize: 14,
                    padding: [-20, 20, 0, 0]
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        type: 'dashed',
                        color: 'rgba(89, 153, 200, 0.5)'
                    }
                },
                axisLabel: {
                    show: true,
                    fontSize: 12,
                    color: "rgba(195, 230, 255, 1)",
                },
            },
        ],
        series: [
            {
                type: "line",
                symbol: "none",
                barWidth: 16,
                label: {
                    show: false,
                    position: "top",
                    color: "#00A8FF",
                },
                areaStyle: {//区域填充渐变颜色
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0, color: '#4CA1FF40' // 0% 处的颜色
                        }, {
                            offset: 1, color: '#4CA1FF00' // 100% 处的颜色
                        }],
                        global: false // 缺省为 false
                    }
                },
                data: Ydata,
            },
        ],
        grid: {
            x: 45,
            y: 25,
            x2: 40,
            y2: 20
        },
    };
    return <Box title={"火情趋势"} >
        {
            fireTrend.length ? <ReactEcharts
                option={option}
                notMerge
                lazyUpdate
                style={{ height: 231, width: 423 }}
            /> : <NoData height={231} />
        }
    </Box>
}

export default Infrastructure;


